
<template>
  <div class="userBehaviorSequence">
    <header class="flex_btw">
      <el-breadcrumb class="cur" separator="/">
        <el-breadcrumb-item>
          <b class="routerBack" @click="routerBack">用户列表</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>用户行为序列</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新数据" placement="bottom">
          <i class="el-icon-refresh-right"></i>
        </el-tooltip>
        <span class="line"></span>
        <el-tooltip class="item" effect="dark" content="下载表格中数据CSV" placement="bottom">
          <i class="el-icon-download"></i>
        </el-tooltip>
      </div>
    </header>
    <section>
      <div class="left" id="echartBox">
        <div id="scrollTopXY" class="header flex_btw">
          <span>
            <el-date-picker
              @change="getEventTotal();getBehaviorSequence(true);"
              :clearable="false"
              v-model="searchTime"
              size="small"
              class="datePic"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-checkbox :disabled="true" v-model="queryConfig.useVirtualEvent">支持虚拟事件</el-checkbox>
          </span>
          <span>
            事件筛选
            <el-select
              filterable
              @change="getEventTotal();getBehaviorSequence(true);"
              v-model="eventChoose"
              size="small"
              multiple
            >
              <el-option
                v-for="item in eventList"
                :key="item.eventId"
                :label="item.eventName"
                :value="item.eventId"
              ></el-option>
            </el-select>
            <span :style="{margin:'0 0 0 10px'}">已选 {{eventChoose.length}} 项</span>
            <span class="allCheck">
              <el-checkbox @change="shaixuanChange($event,'事件')" v-model="eventAllBool">全选</el-checkbox>
            </span>
          </span>
        </div>
        <div :style="{ borderBottom: '1px solid #e9f0f7'}" class="header zhongjian flex_btw">
          <span>事件总量</span>
          <span class="unit">
            <el-radio @change="getEventTotal" size="mini" v-model="unit" label="hour">小时</el-radio>
            <el-radio @change="getEventTotal" size="mini" v-model="unit" label="day">天</el-radio>
            <el-radio @change="getEventTotal" size="mini" v-model="unit" label="week">周</el-radio>
            <el-radio @change="getEventTotal" size="mini" v-model="unit" label="month">月</el-radio>
          </span>
        </div>
        <div v-loading="loadingTotal" id="echartsBehaviorsTop"></div>
        <div class="header flex_btw">
          <span>
            <el-switch
              style="display: block"
              v-model="behaviorSequenceBool"
              active-color="#13ce66"
              active-text="行为序列"
              inactive-text="行为统计"
            ></el-switch>
          </span>
          <span v-if="behaviorSequenceBool&&allPropList[0].options.length>0">
            <span>
              属性筛选
              <el-select
                @change="getBehaviorSequence(true);"
                filterable
                v-model="propChoose"
                size="small"
                multiple
                clearable
              >
                <el-option-group v-for="item in allPropList" :key="item.id" :label="item.label">
                  <el-option
                    v-for="i in item.options"
                    :key="i.propertyId"
                    :label="i.propertyName"
                    :value="i.propertyId"
                  ></el-option>
                </el-option-group>
              </el-select>
              <span :style="{margin:'0 0 0 10px'}">已选 {{propChoose.length}} 项</span>
              <span class="allCheck">
                <el-checkbox @change="shaixuanChange($event,'属性')" v-model="propAllBool">全选</el-checkbox>
              </span>
            </span>
          </span>
          <span v-else>
            <el-radio
              @change="getBehaviorSequence(true);getEventTotal();"
              v-model="queryConfig.loadType"
              label="hour"
            >按小时加载</el-radio>
            <el-radio
              @change="getBehaviorSequence(true);getEventTotal();"
              v-model="queryConfig.loadType"
              label="detail"
            >按明细加载</el-radio>
          </span>
        </div>
        <div v-loading="loadingTotal" id="echartsBehaviorsBottom" v-show="!behaviorSequenceBool"></div>
        <div class="stepList" v-show="behaviorSequenceBool">
          <div class="tabChange">
            <span class="sort">
              <el-radio
                @change="getBehaviorSequence(true)"
                v-model="queryConfig.loadType"
                label="hour"
              >按小时加载</el-radio>
              <el-radio
                @change="getBehaviorSequence(true)"
                v-model="queryConfig.loadType"
                label="detail"
              >按明细加载</el-radio>
            </span>
            <span class="sort">
              加载顺序：
              <el-radio
                @change="getBehaviorSequence(true)"
                v-model="queryConfig.sequenceAsc"
                :label="true"
              >升序</el-radio>
              <el-radio
                @change="getBehaviorSequence(true)"
                v-model="queryConfig.sequenceAsc"
                :label="false"
              >倒叙</el-radio>
            </span>
          </div>
          <!-- 序列步骤条 -->
          <div v-loading="loadingBehavior" class="behaviorListStep">
            <div class="pointSE">
              <span>
                <i class="el-icon-arrow-up"></i>
              </span>
            </div>
            <div class="item" v-for="(item,index) in behaviorListStep" :key="index">
              <div class="item">
                <div class="time timeBox">起始时间 : {{item.fromDate}}</div>
                <div class="point pointBox">{{index+1}}</div>
              </div>
              <div class="item" v-for="(_i,_in) in item.events" :key="_in">
                <div class="time">{{_i.time}}</div>
                <div class="point"></div>
                <div
                  class="head"
                  @click="_i.foldBool=!_i.foldBool"
                  v-show="_i.propList&&_i.propList.length>0"
                >
                  <i class="el-icon-caret-left arrow"></i>
                  <span class="name">{{eventShowName(_i.name)}}</span>
                  <span class="btn"></span>
                </div>
                <div v-show="_i.propList&&_i.propList.length>0&&_i.foldBool" class="section">
                  <span
                    class="sectionItem"
                    v-for="(_is,_ins) in showLengthComputed( _i.propList,_i.showLength)"
                    :key="_ins"
                  >
                    <span class="leftitem">{{_is.label}}</span>
                    <span class="rightitem">{{_is.value}}</span>
                  </span>
                  <div
                    class="moreProp"
                    v-if="_i.showLength<_i.propList.length"
                    @click="_i.showLength+=30"
                  >查看更多属性</div>
                  <div class="moreProp" v-else>暂无更多属性</div>
                </div>
              </div>

              <div class="item">
                <div class="time timeBox">结束时间 ： {{item.toDate}}</div>
                <!-- <div class="point pointBox"></div> -->
              </div>
            </div>
            <div @click="getBehaviorSequence(false)" class="pointSE">
              <span>
                <i class="el-icon-arrow-down"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="header flex_btw" @click="userProps.foldBool = !userProps.foldBool">
          <span>
            <i class="el-icon-s-custom"></i>
            用户属性
          </span>
          <span>
            <i v-if="userProps.foldBool" class="el-icon-arrow-down"></i>
            <i v-if="!userProps.foldBool" class="el-icon-arrow-up"></i>
          </span>
        </div>
        <div class="section" v-show="userProps.foldBool && userProps.propList.length>0">
          <div v-for="_i in userProps.propList" :key="_i.value">
            <h5>{{_i.propertyName}} :</h5>
            <p v-if="_i.propertyValue">{{_i.propertyValue}}</p>
            <p v-else>暂无数据</p>
          </div>
        </div>
      </div>
    </section>
    <el-button size="small" class="upscroll" type="primary" circle @click="scrollTop">
      <i class="el-icon-top" :style="{fontSize:'20px',fontWeight:600}"></i>
    </el-button>
  </div>
</template>
 
<script>
import ElementResize from "@/utils/ElementResize.js";
export default {
  name: "userBehaviorSequence", // 用户列表
  watch: {},
  data() {
    return {
      eventAllBool: false, // 事件筛选全选
      propAllBool: false, // 属性筛选全选
      loadingTotal: false, // 事件总量查询加载
      loadingBehavior: false, // 行为序列查询加载
      allPropList: [
        // {
        //   id: "user",
        //   label: "用户属性",
        //   options: []
        // },
        {
          id: "event",
          label: "事件属性",
          options: []
        }
      ], // 全部属性数组
      eventList: [], // 事件筛选可选值
      eventChoose: [], // 事件筛选选中事件
      propChoose: [], // 属性筛选选中属性
      searchTime: [0, 0], // 查询时间限制
      unit: "day", // day hour week month
      deviceId: null, // 设备ID
      userId: null, // 用户id
      appId: null,
      totallEveBeSta: null, // 事件总量查询结果集
      totallEveBeStaNum: null, // 行为统计查询结果集
      queryConfig: {
        currentPage: 1,
        pageSize: 10,
        limit: 1000,
        appId: null,
        fromDate: null,
        toDate: null,
        unit: "day",
        useDistinct: false, //是否去重
        loadType: "detail", //  detail   hour   按照小时  明细
        sequenceAsc: true, // 升序  降序
        useVirtualEvent: false, // 是否启用虚拟事件
        properties: [], // 指定加载属性
        events: []
      }, // 行为序列查询参数
      activeName: "details",
      myChartTop: null,
      myChartBottom: null,
      behaviorSequenceBool: true, // 行为序列 行为统计
      userProps: {
        foldBool: true, // 用户属性面板折叠开关
        propList: []
      },
      behaviorListStepTotal: 0, // 行为序列数据总量
      behaviorListStep: [] // 行为序列数组
    };
  },
  methods: {
    // 回到页面顶部
    scrollTop() {
      try {
        this.$el.querySelector("#scrollTopXY").scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "nearest" // 上边框与视窗顶部平齐
        });
      } catch (err) {
        console.log(err, "定位错误");
      }
    },
    eventShowName(id) {
      let str = "未知";
      this.eventList.map(_i => {
        if (_i.eventId == id) {
          str = _i.eventName;
        }
      });
      return str;
    },
    shaixuanChange(item, key) {
      if (key == "事件") {
        this.eventChoose = [];
        if (item) {
          this.eventList.map(_i => {
            this.eventChoose.push(_i.eventId);
          });
        }
        this.getEventTotal();
      }
      if (key == "属性") {
        this.propChoose = [];
        if (item) {
          this.allPropList[0].options.map(_i => {
            this.propChoose.push(_i.propertyId);
          });
        }
      }
      this.getBehaviorSequence(true);
    }, // 全选点击函数
    keyValue(_arr, key, prop, value) {
      let res = "未知";
      _arr.map(_i => {
        if (_i[prop] == key) {
          res = _i[value];
        }
      });
      if (res == "未知") {
        return key;
      }
      return res;
    }, // 键值对信息补充函数
    routerBack() {
      this.$router.push({
        path: "/userSelf/userList",
        query: this.$route.query
      });
    }, // 返回用户列表
    echartInit() {
      try {
        this.myChartTop.clear();
      } catch (err) {
        console.log("事件总量清除失败:", err);
      }
      let time = [];
      let data = [];
      this.totallEveBeSta.series.map(_i => {
        // time.push(this.time_change(_i));
        time.push(_i);
      });
      this.totallEveBeSta.rows.map((_i, _in) => {
        data.push({
          value: _i.values[0][0]
        });
      });
      this.myChartTop.setOption(
        {
          backgroundColor: "#fff",
          grid: {
            left: "10%",
            top: "10%",
            right: "10%"
          },
          xAxis: {
            type: "category",
            data: time
          },
          yAxis: {
            type: "value"
          },
          dataZoom: [{ type: "slider" }],
          tooltip: {
            trigger: "axis",
            formatter: params => {
              let resHtml = `
                <div class='formatterNum'> 事件次数 ： ${params[0].data.value}</div>
              `;
              return resHtml;
            }
          },
          series: [
            {
              itemStyle: {
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" }
                  ])
                }
              },
              barWidth: 30, //柱图宽度
              data: data,
              type: "bar"
            }
          ]
        },
        true
      );
      this.getEventTotalNum(); // 查询行为统计函数
    }, // 事件总量渲染函数
    echartInitNum() {
      try {
        this.myChartBottom.clear();
      } catch (err) {
        console.log("行为统计清除失败:", err);
      }
      // 百分比计算函数
      function computed(arr, num) {
        let total = 0;
        arr.map(_i => {
          total += _i.value;
        });
        if (total > 0) {
          return (parseFloat(num / total) * 100).toFixed(2);
        } else {
          return 0;
        }
      }
      let time = [];
      let data = [];
      this.totallEveBeStaNum.series.map(_i => {
        time.push(this.time_change(_i));
      });
      this.totallEveBeStaNum.rows.map((_i, _in) => {
        data.push({
          name: this.keyValue(
            this.eventList,
            _i.byValues[0],
            "eventId",
            "eventName"
          ),
          value: _i.values[0][0]
        });
      });
      let timeTitle = "";
      timeTitle = ` ${this.time_change(
        this.searchTime[0]
      )} 至 ${this.time_change(this.searchTime[1])} 该用户的行为序列`;
      this.myChartBottom.setOption(
        {
          title: {
            subtext: timeTitle,
            left: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: params => {
              console.log(params, "2345678");
              let resHtml = `
                <div class='formatterNum'> ${params.data.name} ： ${
                params.data.value
              }次 
                   占 ${computed(data, params.data.value)} %
                </div>
              `;
              return resHtml;
            }
          },
          legend: {
            left: "center",
            top: "bottom",
            data: data
          },
          series: [
            {
              type: "pie",
              radius: "50%",
              center: ["50%", "52%"],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              data: data
            }
          ]
        },
        true
      );
    }, // 行为统计渲染函数
    routerChange(path, obj) {
      this.$router.push({
        path: path,
        query: obj
      });
    }, // 路由跳转
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + "-" + mon + "-" + day;
    }, // 时间戳转换函数
    async getUserGroupUserProperty() {
      let res = await this.$userSelf.userGroupUserProperty({
        appId: this.appId,
        deviceId: this.deviceId,
        userId: this.userId
      });
      if (_res&&res.success) {
        // 存储全部用户属性
        this.userProps.propList = res.value.userPropertyList;
      }
    }, // 获取右侧全部属性函数
    async getUserPropertyList() {
      let _res = await this.$analysisApi.userAnalysis.userPropertyList({
        appId: this.appId
      });
      if (_res&&_res.success) {
        this.allPropList[0].options = _res.value.eventPropertyList;
        this.propChoose = [];
        this.allPropList.map(_i => {
          _i.options.map(_is => {
            if (this.propChoose.length < 10) {
              this.propChoose.push(_is.propertyId);
            }
          });
        });
      }
      this.getEventList(); // 查询事件筛选全部可选值
    }, //查询属性筛选全部可选值函数
    async getEventList() {
      this.eventChoose = [];
      this.eventList = [];
      let _res = await this.$applicationApi.event_list({
        currentPage: 1,
        pageSize: 100000
      });
      if (_res&&_res.success) {
        this.eventList = _res.value.list;
        _res.value.list.map(_i => {
          this.eventChoose.push(_i.eventId);
        });
        this.getEventTotal(); // 查询事件总量和行为统计的数据
        this.getBehaviorSequence(true); // 查询行为序列数据
      }
    }, // 获取全部事件筛选可选值
    async getEventTotal() {
      if (this.eventChoose.length == 0) {
        this.$message({
          message: "请选择指定事件",
          type: "warning"
        });
        return;
      }
      this.loadingTotal = true;
      let obj = {};
      obj.fromDate = this.searchTime[0];
      obj.toDate = this.searchTime[1];
      obj.unit = this.unit;
      obj.appId = this.appId;
      obj.deviceId = this.deviceId; // 设备id
      obj.userId = this.userId; // 用户id
      obj.byFields = [];
      obj.rollupDate = true;
      obj.filter = {
        conditions: [
          {
            field: "event._Anything.user_id",
            function: "equal",
            params: [this.userId]
          },
          {
            field: "event._Anything.event_id",
            function: "equal",
            params: JSON.parse(JSON.stringify(this.eventChoose))
          }
        ]
      };
      obj.loadType = "event_total";
      obj.measures = [
        {
          eventId: "_Anything",
          aggregator: "general",
          events: JSON.parse(JSON.stringify(this.eventChoose))
        }
      ];
      let _res = await this.$userSelf.usersReportEvents(obj);
      this.loadingTotal = false;
      if (_res&&_res.success) {
        this.totallEveBeSta = _res.value;
        this.echartInit();
      }
    }, // 查询事件总量接口
    async getEventTotalNum() {
      this.loadingTotal = true;
      let obj = {};
      obj.fromDate = this.searchTime[0];
      obj.toDate = this.searchTime[1];
      obj.unit = this.unit;
      obj.appId = this.appId;
      obj.deviceId = this.deviceId; // 设备id
      obj.userId = this.userId; // 用户id
      obj.byFields = ["event._Anything.event_id"];
      obj.rollupDate = true;
      obj.filter = {
        conditions: [
          {
            field: "event._Anything.user_id",
            function: "equal",
            params: [this.userId]
          },
          {
            field: "event._Anything.event_id",
            function: "equal",
            params: JSON.parse(JSON.stringify(this.eventChoose))
          }
        ]
      };
      obj.loadType = "event_groupby";
      obj.measures = [
        {
          eventId: "_Anything",
          aggregator: "general",
          events: JSON.parse(JSON.stringify(this.eventChoose))
        }
      ];
      let _res = await this.$userSelf.usersReportEvents(obj);
      this.loadingTotal = false;
      if (_res&&_res.success) {
        this.totallEveBeStaNum = _res.value;
        this.echartInitNum();
      }
    }, // 查询行为统计接口
    async getBehaviorSequence(bool) {
      if (bool) {
        this.queryConfig.currentPage = 1;
      }
      if (!bool) {
        if (this.behaviorListStep.length >= this.behaviorListStepTotal) {
          return;
        } else {
          this.queryConfig.currentPage++;
        }
      }
      this.loadingBehavior = true;
      let obj = JSON.parse(JSON.stringify(this.queryConfig));
      obj.deviceId = this.deviceId;
      obj.fromDate = this.searchTime[0];
      obj.toDate = this.searchTime[1];
      obj.properties = JSON.parse(JSON.stringify(this.propChoose));
      obj.events = JSON.parse(JSON.stringify(this.eventChoose));
      let _res = await this.$userSelf.usersReportSequence(obj);
      this.loadingBehavior = false;
      if (_res&&_res.success) {
        this.behaviorListStepTotal = _res.value.total;
        let _arr = _res.value.list;
        _arr.map(item => {
          item.events.map(_i => {
            let name = this.keyValue(
              this.allPropList[0].options,
              _i.event,
              "propertyId",
              "propertyName"
            );
            if (name == "未知") {
              name = _i.event;
            }
            _i.showLength = 30;
            _i.name = name; // 名称匹配
            _i.foldBool = false; // 折叠开关
            // 补充折叠属性
            _i.propList = [];
            Object.keys(_i.properties).forEach(key => {
              let label = this.keyValue(
                this.allPropList[0].options,
                key,
                "propertyId",
                "propertyName"
              );
              if (label == "未知") {
                label = key;
              }
              let item = {
                label: label,
                value: _i.properties[key]
              };
              _i.propList.push(item);
            });
          });
        });
        if (bool) {
          this.behaviorListStep = _arr;
        } else {
          if (this.queryConfig.loadType == "hour") {
            this.behaviorListStep = [...this.behaviorListStep, ..._arr];
          } else {
            this.behaviorListStep[0].events = [
              ...this.behaviorListStep[0].events,
              ..._arr[0].events
            ];
          }
        }
      }
    }, // 查询行为序列函数
    showLengthComputed(arr, length) {
      let _arr = [];
      for (let i = 0; i <= arr.length - 1; i++) {
        if (i < length) {
          _arr.push(arr[i]);
        }
      }
      return _arr;
    }
  },
  created() {
    let {
      productCode,
      appId,
      taskType,
      q,
      deviceId,
      userId
    } = this.$route.query;
    this.productCode = productCode;
    this.appId = appId;
    this.queryConfig.appId = appId;
    this.taskType = taskType;
    this.q = q;
    this.deviceId = deviceId; // 设备id
    this.userId = userId; // 用户id
    this.queryConfig.userId = userId;
    this.searchTime = [
      this.time_change(new Date() - 1 * 24 * 60 * 60 * 1000),
      this.time_change(new Date())
    ];
  },
  mounted() {
    this.myChartTop = this.$echarts.init(
      document.getElementById("echartsBehaviorsTop"),
      "light"
    );
    this.myChartBottom = this.$echarts.init(
      document.getElementById("echartsBehaviorsBottom"),
      "light"
    );
    this.getUserGroupUserProperty(); // 获取右侧全部属性函数
    this.getUserPropertyList(); // 获取属性筛选全部可选值函数
    // 获取属性筛选值
    ElementResize.on(document.getElementById("echartBox"), () => {
      try {
        this.myChartBottom.resize();
        this.myChartTop.resize();
      } catch (err) {
        console.log(err);
      }
    });
  },
  components: {},
  computed: {}
};
</script>
<style scoped lang="scss">
.upscroll {
  position: fixed;
  right: 60px;
  bottom: 60px;
  z-index: 100;
}
* {
  box-sizing: border-box;
}
::v-deep .el-select__tags {
  max-height: 30px;
  overflow: hidden;
}
.routerBack {
  cursor: pointer;
  color: #303133;
}
.routerBack:hover {
  color: #00bf8a;
}
.behaviorListStep {
  width: 80%;
  margin: 50px auto;
  border-left: 2px solid #dcdfe6;
  .pointSE:nth-child(1) {
    top: -30px;
  }
  .pointSE {
    position: relative;
    width: 100%;
    margin: 0px auto;
    height: 1px;
    left: -16px;
    span {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      border: 2px solid #dcdfe6;
      color: #dcdfe6;
      border-radius: 50%;
      justify-content: center;
      i {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
  .item {
    position: relative;
    width: 100%;
    margin: 30px auto;
    min-height: 50px;
    .time {
      position: absolute;
      font-size: 12px;
      width: 80px;
      transform: translateY(-50%);
      top: 25px;
      right: calc(100% + 20px);
      line-height: 1.6;
      text-align: end;
      color: #8492a6;
    }
    .timeBox {
      font-size: 14px;
      width: 300px;
      right: calc(100% - 340px);
      text-align: left;
      font-family: "Courier New", Courier, monospace;
    }
    .point {
      position: absolute;
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 50%;
      background: #dcdfe6;
      transform: translateY(-50%);
      top: 25px;
      right: calc(100% - 5px);
    }
    .pointBox {
      font-weight: 500;
      right: calc(100% - 4px);
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      background: rgba($color: white, $alpha: 1);
      font-size: 20px;
    }
    .head {
      width: 97%;
      height: 50px;
      margin: 0 0 0 3%;
      color: #475669;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      .name {
        color: #606266;
        text-indent: 20px;
        font-size: 14px;
      }
      .btn {
        opacity: 0;
        .el-button {
          padding: 0 20px 0 0;
          font-size: 10px;
        }
      }
      .arrow {
        color: rgba($color: #e9f0f7, $alpha: 1);
        font-size: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-56%, -50%);
      }
      background: rgba($color: #e9f0f7, $alpha: 1);
    }
    .head:hover {
      .btn {
        opacity: 1;
      }
    }
    .section {
      width: 97%;
      border: 1px solid #dcdfe6;
      margin: 0 0 0 3%;
      cursor: pointer;
      .sectionItem {
        display: inline-block;
        min-height: 0.8rem;
        width: 50%;
        margin: 4px 0;
        border: none;
        line-height: 0.8rem;
        padding-left: 0.2rem;
        position: relative;
        .leftitem {
          position: absolute;
          width: 2.4rem;
          left: 0;
          top: 0;
          display: inline-block;
          color: rgba(0, 0, 0, 0.54);
          text-align: end;
          text-indent: 12px;
          height: 100%;
        }
        .rightitem {
          position: relative;
          left: 2.4rem;
          width: calc(100% - 2.4rem);
          display: inline-block;
          color: rgba(0, 0, 0, 0.87);
          text-align: start;
          text-indent: 12px;
        }
      }
      .moreProp {
        width: 100%;
        height: 0.6rem;
        text-align: center;
        line-height: 0.6rem;
        font-size: 10px;
        color: #307ef2;
        border-top: 1px solid rgba($color: #dcdfe6, $alpha: 0.6);
      }
    }
  }
}
// 规则创建弹框  Box
.userBehaviorSequence {
  width: 96%;
  margin: 0px auto;
  header {
    width: 98%;
    margin: 0 auto;
    height: 40px;
    .cur {
      padding: 0 !important;
    }
    .line {
      width: 1px;
      height: 0.2rem;
      background: #8492a6;
      opacity: 0.6;
      display: inline-block;
      margin: 0 16px;
    }
    i {
      font-size: 18px;
      font-weight: 500;
      color: #8492a6;
    }
  }
  section::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  section {
    margin: 0 auto;
    height: calc(100vh - 106px);
    overflow-y: scroll;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    .left {
      width: 80.4%;
      background: #fff;
      border-radius: 2px;
      border: 1px solid #eff2f7;
      margin-bottom: 40px;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // border-bottom: 1px solid #e9f0f7;
        height: 48px;
        color: #1f2d3d;
        font-weight: 500;
        cursor: pointer;
        width: 96%;
        margin: 0 auto;
        .datePic {
          width: 5rem;
          margin: 0 10px 0 0;
        }
        span:nth-child(2) {
          color: rgb(119, 124, 124);
          font-size: 13px;
        }
        .el-select {
          margin: 0 0 0 10px;
          width: 200px;
        }
        .allCheck {
          margin: 0 20px;
          .el-checkbox {
            color: #777c7c;
            font-size: 13px;
          }
        }
      }
      .zhongjian {
        color: #6f6f70;
        font-size: 16px;
        font-weight: 400;
      }
      #echartsBehaviorsTop {
        padding: 12px 0;
        height: 6rem;
      }
      #echartsBehaviorsBottom {
        padding: 12px 0;
        height: 8rem;
      }
      .stepList {
        padding: 0 0 60px 0;
        .tabChange {
          height: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 96%;
          margin: 0 auto;
          .sort {
            color: rgb(119, 124, 124);
          }
        }
      }
    }
    .right {
      width: 19%;
      background: #fff;
      border-radius: 2px;
      border: 1px solid #eff2f7;
      margin-bottom: 40px;
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9f0f7;
        height: 48px;
        color: #1f2d3d;
        font-weight: 500;
        cursor: pointer;
        width: 90%;
        margin: 0 auto;
        i {
          font-size: 16px;
          font-weight: 600;
          color: #909399;
        }
        span:nth-child(2) {
          i:hover {
            color: #00bf8a;
          }
        }
      }
      .section {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 10px;
        h5 {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.54);
          margin: 4px auto;
          padding: 4px 0 0 0;
          letter-spacing: 1px;
        }
        p {
          text-indent: 12px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
